<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*   #ffc200 */
        ul{
            list-style: none;
        }
        a {
            text-decoration: none; /* 去掉下划线 */
            color: inherit; /* 继承父元素颜色，状态不变 */
        }
        .app{
            width: 100%;
            height: 1200px;
        }
        .nav{
            width: 270px;
            height: 730px;
            background-color: #353744;
            color: aliceblue;
            padding-top: 100px;
            padding-left: 20px;
            display: inline-block;
        }

        .nav ul li{
            width: 120px;
            height: 50px;
            margin-top: 10px;
            font-size: 22px;
            text-align: center;
            line-height: 50px;
            border: 1px solid #ffc200;
            border-radius: 40px;
            background-color: #ffc200;
        }

        .content{
            height: 730px;
            width: 1200px;
            background-color: aliceblue;
            display: inline-block;
        }
        .content-mian{
            font-size: 25px;
        }
        .btn-add{
            margin-left: 0px;
        }
        .btn-add button{
            border: 1px solid #353744;
            width: 80px;
            height: 30px;
            background-color: green;
            border-radius: 30px;
            color: aliceblue;
        }
        .btn-delete button{
            border: 1px solid #353744;
            width: 80px;
            height: 30px;
            background-color: green;
            border-radius: 30px;
            color: aliceblue;
        }

    </style>
</head>
<body>
<div class="app">
    <div class="nav">
        <ul>
            <li><a href="index.html">员工管理</a></li>
            <li><a href="fenlei.html">分类管理</a></li>
        </ul>
    </div>

    <div class="content">
        <div class="content-nav">
            <h1>分类管理</h1>
            <h3>分类信息</h3>
            <div class="btn-add">
                <span>请输入分类名称:</span><input id="flm" type="text">
                <button onclick="add()">添加分类</button>
            </div>
            <hr>
            <div class="btn-delete">
                <span>ID:</span><input id="ID" type="text">
                <button onclick="delete_e()">删除分类</button>
            </div>

        </div>

        <div class="content-mian" id="content">

        </div>
    </div>
</div>
</body>

<script src="axios.min.js"></script>
<script>
    window.onload=function(){
        employeeInfo();
    }

    function employeeInfo(){
        var contentId =  document.getElementById("content");

        axios({
            url: "http://localhost:8080/category/page",
            method: 'get'
        }).then(response => {
            var arrayRes = [];
            arrayRes = response.data.data;
            var s = "";
            for (var i = 0; i < arrayRes.length; i++) {
                s += "ID:"+arrayRes[i].id+",分类名称:"+arrayRes[i].name +"<br/>";

            }
            contentId.innerHTML = s;
        })
    }

    function add(){
        var flm = document.getElementById("flm");
        var myUrl = "http://localhost:8080/category/add?name="+flm.value;
        axios({
            url: myUrl,
            method: 'post'
        }).then(response => {
            employeeInfo();
        });

    }
    function delete_e(){
        var ID = document.getElementById("ID");
        var myUrl = "http://localhost:8080/category/delete?id="+ID.value;
        axios({
            url: myUrl,
            method: 'post'
        }).then(response => {
            employeeInfo();
        });

    }
    // function delete(){
    //   // var ID = document.getElementById("ID");
    //   // var myUrl = "http://localhost:8080/employee/delete?id=ID;
    //   // axios({
    //   //   url: myUrl,
    //   //   method: 'post'
    //   // }).then(response => {
    //   //   employeeInfo();
    //   // });
    //
    // }
</script>
</html>